<template>
    <div class="guiGeInfo whiteBg pt10 pb10 pl15 pr15 br10 relative borderbox">
        <div class="flex flexSpace h30" @click="showPopup">
            <div class="flex fs16">
                <span class="guiGeColor">规格</span>
                <span class="ml5">{{defaultSpect | sliceString(15)}}</span>
            </div>
            <x-icon type="ios-arrow-forward" size="30"></x-icon>
        </div>
        <popup v-model="show" height="80%" :popup-style="popupState" @on-hide="bodyFixed(false)" @on-show="bodyFixed(true)">
            <div class="scrollView">
                <div class="flex row flexSpaceB">
                    <img :src="proImg.img" class="imgs" />
                    <div class="flex col w100 textL pl10 borderbox nameDiv">
                        <p class="fs16 bold lh20">{{proName}}</p>
                        <span class="fs16 bold price">￥ {{Price}}</span>
                    </div>
                </div>
                <span class="price mt14 pb14 w100 vux-1px-b flex w100 textL">
                    <span class="fs14">已选 {{defaultSpect | sliceString(15)}}</span>
                </span>
                <div class="w100 mt10" v-for="(item,index) in productSpecList" :key="index">
                    <p class="textL guiGeColor fs14">{{item.parentName}}</p>
                    <ul class="w100 flex flexWrap typeList mt10 mb10">
                        <li v-for="(val,ind) in item.specList" :key="ind" :class="{ active:val.checked }" @click.stop="checkProSpec(ind,index)">{{val.specName}}</li>
                    </ul>
                </div>
                <div class="w100 mt10 mb20 flex flexSpaceB">
                    <p class="textL guiGeColor fs14">购买数量</p>
                    <div class="flex flexCenter pt5 pb5 pl10 pr10 grayBg br20">
                        <span class="w30 h100 fs20 grayColor" @click="change(false)">-</span>
                        <span class="w40 h100 fs20">{{proNum}}</span>
                        <span class="w30 h100 fs20 grayColor" @click="change(true)">+</span>
                    </div>
                </div>
            </div>
            <div class="flex flexCenter btn">
                <span class="fs14 pt12 pb12 whiteText btlr16 bblr16" @click="addShopCart">加入购物车</span>
                <span class="fs14 pt12 pb12 whiteText btrr16 bbrr16" @click="payMoney">立即购买</span>
            </div>
        </popup>
    </div>
</template>
<script>
import { Popup } from 'vux';
import { MessageBox, Toast } from "mint-ui";
import { queryProductSpecByPrice,Shopset } from 'request';
import mixins from 'mixins';
export default {
    name:'checkFormat',
    mixins:[mixins],
    props:{
        productSpec:{
            type:Array,
            default:[],
        },
        proImg:{
            default:{img:''}
        },
        proName:{
            type:String,
            default:'--'
        },
        proId:{
            type:String,
            default:'',
        }
    },
    computed:{
        defaultSpect(){
            let str = '';
            this.productSpecList.forEach(item=>{
                item.specList.forEach(val=>{
                    val.checked && (str += val.specName + '*')
                })
            });
            return str ? (str + this.proNum) : '--';
        },
        getPriceStr(){
            let arr = [];
            this.productSpecList.forEach(item=>{
                item.specList.forEach((val,index)=>{
                    val.checked && (arr.push(val.specId));
                });
            });
            if(arr.length != 0){
                arr.sort((a,b) => b-a);
                let str = arr.join(',')
                this.$parent.specString = str;                      //关联父组件中的规格组合
                return str
            }else{
                return '';
            }
        },
        Price(){
            return this.specPrice * this.proNum || 0;
        }
    },
    components:{
        Popup
    },
    data(){
        let arr = [...this.productSpec];
        arr.forEach(item=>{
            item.specList.forEach((val,index)=>{
                val.checked = index == 0 ? true : false;
            })
        })
        console.log(arr)
        return{
            show:false,
            popupState:{
                borderTopLeftRadius:'1.5rem',
                borderTopRightRadius:'1.5rem',
                background:'white',
                boxSizing:'border-box',
                padding:'2rem 1.5rem 0rem 1.5rem',
                textAlign:'center'
            },
            productSpecList: arr,                     //保存本地规格列表
            proNum:1,                                 //购买数量
            specPrice:0,
        }
    },
    created(){
        //获取商品价格
        this.queryPrice();
    },
    methods:{
        showPopup(){
            this.show = !this.show;
        },
        //选择规格
        checkProSpec(ind,index){
            if(this.productSpecList[index]['specList'][ind]['checked']){
                return;
            }
            let arr = [...this.productSpecList];
            arr[index]['specList'].forEach((item,mid)=>{
                item.checked = mid == ind ? true : false;
            });
            this.productSpecList = arr;
            this.queryPrice();
        },
        //更改购买数量
        change(type){
            if(type){
                this.proNum += 1;
                this.$parent.proNum = this.proNum;
            }else{
                if(this.proNum != 1){
                    this.proNum -= 1;
                    this.$parent.proNum = this.proNum;
                }
            }
        },
        //查看组合价格接口
        queryPrice(){
            queryProductSpecByPrice({productId: this.proId,specId:this.getPriceStr}).then(res=>{
                this.specPrice = res.data.specPrice;
            })
        },
        //加入购物车
        addShopCart(){
            this.$vux.loading.show({text:'loading'});
            let params = {
                productNo:this.$parent.cateNo,
                isAdd:'01',
                buynum:this.proNum,
                specIds:this.getPriceStr,
                selectBox:'true',
            }
            Shopset(params).then(res=>{
                this.$vux.loading.hide();
                if(res.rspCode == '0000' && res.data.code == '0000'){
                    Toast({message:'添加成功'});
                    this.show = false;
                }
            }).catch(err => this.$vux.loading.hide())
        },
        //立即购买
        payMoney(){
            this.bodyFixed(false);
            this.$parent.payMoney();
        },
    }
}
</script>
<style lang="less" scoped>
.vux-x-icon {
    fill: #c7c6cb;
}
.price{
    color:#fd3b2f;
}
.guiGeInfo{
    width:94%;
    margin-left:3%;
    margin-top:1.4rem;
}
.guiGeColor{
    color:#8f8e94;
}
.imgs{
    max-width:100%;
    float:left;
    width:12rem;
    height:9rem;
}
.nameDiv{
    height:9rem;
    justify-content: space-around;
}
.btn{
    position:absolute;
    bottom:0rem;
    background:white;
    left:0rem;
    right:0rem;
    height:5rem;
    &>span:first-child{
        background:#fd3b2f; 
        width:46%;
    }
    &>span:last-child{
        background:#c40001;
        width:46%;
    }
}
.scrollView{
    height: calc(100% - 10rem);
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }
}
.typeList{
    &>li{
        padding:0.4rem 1.8rem;
        background:#f6f6f6;
        font-size:1.4rem;
        border-radius: 1rem;
        margin:0rem 0.5rem 0.8rem;
        border:1px solid transparent;
        &.active{
            background:#ffe3e2;
            color:#ff3a31;
            border:1px solid #ff3a31;
        }
    }
}
.grayBg{
    background:#f6f6f6;
}
.grayColor{
    color:#8f8e94;
}
</style>
